<template>
  <div class="dog">
    <div class="little_dog">
      <img :src="imgurl" alt="'这是一个狗狗图片'" />
      <p :style="{ backgroundColor: colorStr }" @click="btn(index)">
        {{ dogName }}
      </p>
    </div>
  </div>
</template>

<script>
export default {
  props: ['imgurl', 'dogName', 'index'],
  data() {
    return {
      colorStr: '',
    }
  },
  methods: {
    btn(index) {
      // console.log(11);
      this.$emit('write', index)
    },
  },
}
</script>

<style scoped>
.dog {
  width: 30%;
}
.little_dog {
  width: 100%;
  height: 400px;
  border: 1px solid black;
  text-align: center;
}
.little_dog img {
  width: 100%;
  height: 300px;
}
</style>
